<template>
  <div class="order-container">
    <ListTab v-model="active" :tabs="tabList" :show-header="false" :height="showMobilePage?'40px':'48px'" show-drop is-self-tab padding-left="16px" @handleTabClick="switchTab" />
    <div class="medium-app-container">
      <MediumOrderList
        :loading="loading"
        :active="active"
        :data="active === 'total' ? totalOrderData : orderData"
        :init="init"
        @getOrder="getOrder"
        @getCurrentPage="getCurrentPage"
        @querySearch="querySearch"/>
    </div>
  </div>
</template>
<script>
// 订单状态
// 1、待确认 2、执行中 3、已完成 4、已关闭
// 订单达人状态
// 	1、待确认，2、待响应，3、已响应，4、已取消，5、待执行，6、已完成，7、已终止
import { meidumOrderList, totalOrder } from '@/api/medium';
import MediumOrderList from '@/components/MediumPage/order/OrderList';
import ListTab from '@/components/ListTab';
import { mapState } from 'vuex';

export default {
  name: 'MediumOrder',
  components: { MediumOrderList, ListTab },
  data() {
    return {
      page: 1,
      perPage: 20,
      status: 0,
      active: '0',
      orderData: {},
      init: false,
      totalOrderData: {},
      loading: false,
      query: {},
      tabList: [
        { id: '0', name: '全部询单' },
        { id: '1', name: '待确认询单' },
        { id: '2', name: '执行中询单' },
        { id: '3', name: '已完成询单' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.getOrder();
  },
  methods: {
    switchTab(status) {
      this.active = status;
      if (isNaN(Number(status))) { // 判断选中的tab是统计还是订单列表
        this.$route.meta.background = '#FBFBFD';
        this.getTotalOrder(true);
      } else {
        this.status = Number(status);
        this.$route.meta.background = '#fff';
        this.getOrder(true);
      }
    },
    async getOrder(reset = false) { // 订单列表
      if (reset) this.page = 1;
      try {
        const params = {
          page: this.page,
          perPage: this.perPage
        };
        if (this.status) params.status = Number(this.status);
        Object.assign(params, this.query);
        this.loading = true;
        const result = await meidumOrderList(params);
        this.init = true;
        this.loading = false;
        if (result.code === 200) {
          window.scroll({ top: 0, left: 0 });
          this.orderData = result.data;
        } else {
          this.$message({ type: 'error', message: result.message });
        }
      } catch (error) {
        this.init = true;
        this.loading = false;
        console.log('error:message');
      }
    },
    async getTotalOrder(reset = false) {
      if (reset) this.page = 1;
      try {
        const params = {
          page: this.page,
          perPage: this.perPage
        };
        this.loading = true;
        const result = await totalOrder(params);
        this.init = true;
        this.loading = false;
        if (result.code === 200) {
          this.totalOrderData = result.data;
        } else {
          this.$message({ type: 'error', message: result.message });
        }
      } catch (error) {
        this.init = true;
        this.loading = false;
        this.$message({ type: 'error', message: error.message });
      }
    },
    getCurrentPage(toPage) {
      if (toPage) {
        this.page = toPage;
        this.active !== 'total' ? this.getOrder() : this.getTotalOrder();
      }
    },
    querySearch(query) {
      this.query = query;
      this.getOrder(true);
    }
  }
};
</script>
<style lang="scss" scoped>
.medium-app-container {
  background-color: #fff;
}
.order-container {
  padding-bottom: 20px;
  position: relative;
  .medium-app-container {
    background-color: #FBFBFD;
    border:none;
  }
}
</style>
